<!DOCTYPE html>
<html lang="ch" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript"
          src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  <link rel="stylesheet" type="text/css" th:href="@{/css/dialog.css}">
</head>
<body>
<button onclick="show()">新增用户</button>
<div class="dialog">
  <!-- 弹窗内容 -->
  <div class="content">
    <div class="aclose">
      <span>新增用户</span>
      <a class="close" href="javascript:close();">&times;</a>
    </div>
    <div class="contain">
      <div class="form-wrapper">

        <form th:action="@{/add_user}" th:object="${user}" method="post">
          <input type="text" th:field="*{name}" name="username" placeholder="username" class="input-item"/>
          <input type="password" th:field="*{password}" name="password" placeholder="password"
                 class="input-item">
          <button type="submit" class="btn">添加用户</button>

        </form>
      </div>
    </div>
  </div>

</div>
<h3>用户列表</h3>
<table border="1">
  <tr>
    <th>姓名</th>
    <th>密码</th>
  </tr>
  <tr th:each="user:${users}">
    <th th:text="${user.name}"></th>
    <th th:text="${user.password}"></th>
<!--    <th>-->
<!--      <button name="delete" th:onclick="|deleteUser(${user.id})|">删除</button>-->
<!--    </th>-->
  </tr>
</table>
</body>
</html>
<script>


  function deleteUser(id) {
    window.location.href = "/delete_user/" + id;
  }

  function show() {
    var show = $(".dialog").css("display");
    $(".dialog").css("display", show == "none" ? "block" : "none");
  }

  function close() {
    var show = $(".dialog").css("display");
    $(".dialog").css("display", show == "none" ? "block" : "none");
  }

  function addUser() {
    var txt;
    var name = prompt("请输入用户名")
    var password = prompt("请输入密码");
    if (name != null && password != null) {
      alert(name);
      alert(password);
    }
  }

</script>
